<template>
  <a-modal
    :title="formData.id ? '修改产线' : '新增产线'"
    v-model:visible="visible"
    :width="800"
  >
    <template #footer>
      <a-space>
        <a-button type="primary" @click="handleOk">确定</a-button>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <a-spin :loading="loading">
      <a-form :model="formData" ref="refForm" auto-label-width>
        <a-row :gutter="8">
          <a-col :span="12">
            <a-form-item label="产线编码">
              <a-input
                placeholder="无需输入，系统自动生成..."
                disabled
                v-model="formData.lineCode"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="产线名称"
              field="lineName"
              :rules="getRules('产线名称')"
            >
              <a-input placeholder="请输入" v-model="formData.lineName" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="所属车间"
              field="workshopId"
              :rules="getRules('所属车间')"
            >
              <WorkshopChoice
                @choice="
                  ({ id }) => {
                    formData.workshopId = id;
                  }
                "
                ref="refWorkshopChoice"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="负责人"
              field="chargeId"
              :rules="getRules('负责人')"
            >
              <UserChoice v-model:value="formData.chargeId" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="启用状态"
              field="enable"
              :rules="getRules('启用状态')"
            >
              <a-select v-model="formData.enable" placeholder="请选择">
                <a-option
                  v-for="(item, index) in ['启用', '停用']"
                  :key="item"
                  :value="index + 1"
                >
                  {{ item }}
                </a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
              label="创建人"
              field="foundId"
              :rules="getRules('创建人')"
            >
              <UserChoice v-model:value="formData.foundId" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12" class="dept">
            <a-form-item
              label="物料产能"
              field="unitCapacity"
              :rules="getRules('产能')"
            >
              <a-input-number
                :min="1"
                v-model="formData.unitCapacity"
                placeholder="请输入"
                allow-clear
                hide-button
              >
                <template #suffix> 个/每小时 </template>
              </a-input-number>
            </a-form-item>
          </a-col>

          <a-col :span="24" class="dept">
            <a-form-item label="产能负荷：">
              <a-row :gutter="8">
                <a-col :span="8" class="dept">
                  <a-input-number
                    :min="1"
                    v-model="formData.spareLoad"
                    placeholder="请输入"
                    :max="100"
                    allow-clear
                    hide-button
                  >
                    <template #prefix>
                      <div
                        class="prefix"
                        style="background: rgb(var(--green-6))"
                      >
                        空闲
                      </div>
                    </template>
                    <template #suffix> % </template>
                  </a-input-number>
                </a-col>
                <a-col :span="8" class="dept">
                  <a-input-number
                    :min="1"
                    v-model="formData.middleLoad"
                    placeholder="请输入"
                    allow-clear
                    :max="100"
                    hide-button
                  >
                    <template #prefix>
                      <div
                        class="prefix"
                        style="background: rgb(var(--orange-6))"
                      >
                        中等
                      </div>
                    </template>
                    <template #suffix> % </template>
                  </a-input-number>
                </a-col>
                <a-col :span="8" class="dept">
                  <a-input-number
                    :min="1"
                    v-model="formData.peakLoad"
                    placeholder="请输入"
                    allow-clear
                    :max="100"
                    hide-button
                  >
                    <template #prefix>
                      <div class="prefix" style="background: rgb(var(--red-6))">
                        峰值
                      </div>
                    </template>
                    <template #suffix> % </template>
                  </a-input-number>
                </a-col>
              </a-row>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              label="产线说明"
              field="remark"
              :rules="getRules('产线说明')"
            >
              <a-textarea placeholder="请输入" v-model="formData.remark" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick } from 'vue';
  import { EditProductionLine, AddProductionLine } from '@/api/FactoryModeling';
  import { TProductionLine } from '@/api/FactoryModeling/type';
  import WorkshopChoice from '@/views/client-side/FactoryModeling/components/WorkshopChoice.vue';

  let refWorkshopChoice = ref();
  let visible = ref(false);
  let formData = reactive<TProductionLine>({});
  let loading = ref(false);
  let loadData = async (data?: TProductionLine) => {
    for (const key in formData) {
      delete formData[key];
    }
    visible.value = true;
    if (data) {
      loading.value = true;
      Object.assign(formData, data);
      loading.value = false;
      refWorkshopChoice.value.inputValue = data.workshopName;
    } else {
      refWorkshopChoice.value.inputValue = '';
      const deptDate = JSON.parse(sessionStorage.getItem('loginInfo') || '');
      formData.foundId = deptDate.id;
    }
  };

  let emit = defineEmits(['refresh']);
  let refForm = ref();
  let handleOk = async () => {
    if (await refForm.value.validate()) return;
    if (formData.id) {
      await EditProductionLine(formData);
    } else {
      await AddProductionLine(formData);
    }
    emit('refresh');
    visible.value = false;
  };
  defineExpose({ loadData });

  let getRules = (name?: string) => {
    return [{ required: true, message: (name || '') + '不能为空' }];
  };
</script>

<style scoped>
  .prefix {
    height: 100%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: -12px;
    width: 50px;
  }
</style>
